

<div id="tableContainer">

	<?php 
	
	
	if (isset($offers) && count($offers)!=0) {
		
		// show avaiable offers
		//$this->firephp->log($offers);
		//$this->firephp->log($user);
		?>
		<table>
			<thead>
				<th>oferta</th>
				<th>Preço</th>
				<th>nivel</th>
				<th>aulas</th>
				<th>vagas</th>
				<th></th>
			</thead>
		<?php		
		
		// display all available offers for the school associate to this hotel
		foreach ($offers as $value) {
			?>
			<tbody>
				<tr>
					<td>
						<?php 
							echo anchor(
								"Hotel/offer",
								$value->name,
								array(
									'class' 		=>'offerName',
									'data-offerId'	=>$value->offer_id,
									'data-userId'	=>$user->id
								)
							);
						?>
					</td>
					<td><?php echo $value->price;?></td>
					<td><?php echo $value->level;?></td>
					<td>
						<?php 
							echo anchor(
								"Hotel/classes",
								$value->number_of_classes,
								array(
									'class'			=>'classes',
									'data-offerId'	=>$value->offer_id,
									'data-userId'	=>$user->id
								)
							);
						?>
					</td>
					<td>
						<?php 
							echo $value->spots;
						?>
					</td>
					<td>
						<?php 
							if ($value->spots)
								echo anchor('Hotel/reservation/'.$value->offer_id,'reservar');
						?>	
					</td>
				</tr>
			</tbody>
			<?php 
		}		
		?>
			</table>
		<?php
	}
	else {
		?><p><?php echo "Nao existem ofertas disponiveis nesta escola";?></p><?php 
	}
		
	?>
</div>	


<div id="tmpAction">
	tmp action
</div>




<script>

	$(document).ready(function() {
	
		// when user click the link with the number of classes available
		$('.classes').click(function(event) {
			event.preventDefault();
			offerId = $(this).attr('data-offerId');
			userId = $(this).attr('data-userId');
			getSchedules(offerId, userId);
			//console.log('offerId = ' + offerId + '; '+ ' userId = ' + userId);
			//alert('prevent default');
		});

		// when the user click the link with the name of the offer
		$('.offerName').click(function(event) {
			event.preventDefault();
			offerId = $(this).attr('data-offerId');
			userId = $(this).attr('data-userId');
			getOfferInfo(offerId, userId);
			//console.log('offerId = ' + offerId + '; '+ ' userId = ' + userId);
			//alert('prevent default');
		});

		// tmp action show calendar
		$('#tmpAction').click(function(event) {
			alert('tmp action');
		});
		
	});
	

	
	// get future schedules associated to the offer
	function getSchedules(offerId,userId) {
		
		$.getJSON(window.ajaxUrl + "/readScheduleAction",
			{
				offerId:	offerId,
				userId:		userId
			},
			function(schedules){
				popUpCalendar(schedules);
			}
		);
	}
	
	

	// get information about the offer
	function getOfferInfo(offerId,userId) {
		
		$.getJSON(window.ajaxUrl + "/readOfferAction",
			{
				offerId:	offerId,
				userId:		userId
			},
			function(offer){
				popUpOfferInfo(offer);	
			}
		);
	}



	

	
	function popUpCalendar(schedules) {

		var popUpCalendarDialog = $('#popUpCalendarDialog');

		popUpCalendarDialog.attr('title','Aulas');

		// remove all elements inside this id
		popUpCalendarDialog.empty();

		// dialog properties
		var properties = {
			width:		480,
			height:		400,
			show: 		'fade',
			hide: 		'fade',
			buttons: {
				"Ok": 		
				function() {
					$(this).dialog("close");
				}
			}
		};

		// iterate through all schedules 
		$.each(schedules, function(key, value) {
			var cal_container = '<div class="cal-container"><div class="cal-class-label inside-cal-container"><p>Aula '+ (key+1) + ':</p></div> <div class="cal-data-container inside-cal-container"><div class="cal-date-label"><p>Inicio:</p></div><div class="cal-date"><p>' + schedules[key].start +'</p></div><div class="cal-date-label"><p>Fim:</p></div><div class="cal-date"><p>' + schedules[key].end + '</div></p></div></div>';
			$(cal_container).appendTo('#popUpCalendarDialog');
		});

		// show dialog
		popUpCalendarDialog.dialog(properties); 
	}



	

	function popUpOfferInfo(offer) {

		$('#offerInfoDialog').attr('title',offer[0].offerName);
		var offerInfoContainer 	= $('#offerInfoContainer');
		offerInfoContainer.find('.price p').text(offer[0].offerPrice);
		offerInfoContainer.find('.level p').text(offer[0].offerLevel);
		offerInfoContainer.find('.description p').text(offer[0].offerDescription);

		//console.log(offer[0].offerDescription);
		// add offer data (using jquery chaining feacture)
		//$('#offerInfoContainer')
			//.find('.price p').text(offer[0].offerPrice)
			//.find('.level p').text(offer[0].offerLevel)
			//.find('.description p').text(offer[0].offerDescription);
		
		var properties = {
			width:		500,
			height:		400,
			show: 		'fade',
			hide: 		'fade',
			buttons: {
				"Ok": 		
				function() {
					$(this).dialog("close");
				}
			}
		};
		
		$('#offerInfoDialog').dialog(properties); 
	}	
	
</script>




<div id="popUpCalendarDialog" class="dialog" title="calendario">
	
	<!--  
	<div class="cal-container">
		<div class="cal-class-label 	inside-cal-container"><p>Aula 1:</p></div>
		<div class="cal-data-container 	inside-cal-container">
			<div class="cal-date-label"><p>Inicio:</p></div>
			<div class="cal-date"></div>
			<div class="cal-date-label"><p>Fim:</p></div>
			<div class="cal-date"></div>
		</div>
	</div>
	
	<div class="cal-container">
		<div class="cal-class-label 	inside-cal-container"><p>Aula 2:</p></div>
		<div class="cal-data-container 	inside-cal-container">
			<div class="cal-date-label"><p>Inicio:</p></div>
			<div class="cal-date"></div>
			<div class="cal-date-label"><p>Fim:</p></div>
			<div class="cal-date"></div>
		</div>
	</div>
	-->
</div>





<div id="offerInfoDialog" class="dialog" title="">
	<div id="offerInfoContainer">
		<div class="label">
			<p>Preço:</p>
		</div>
		<div class="content price">
			<p>80 euros</p>
		</div>
		<div class="label">
			<p>Nível:</p>
		</div>
		<div class="content level">
			<p>beginner</p>
		</div>
		<!--  
		<div class="content spots">
			<p>Existem X vagas disponiveis de um total de Y </p>
		</div>
		-->
		<div class="description">
			<p>Descrição</p>
		</div>
		
	</div>
</div>

<p>
<?php 

?>
</p>

